<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 自定义指令 组成由指令名称，指令参数，指令修饰符和指令值组成的 -->
        <!-- <input v-foc:aaa.bbb="ccc" type="text"> -->
        <input v-foc="ccc" type="text"> 
        <hr>
        <input v-foc:color type="text">
        <hr>
        <input v-foc:color="'blue'" type="text">
        <hr>
        <input v-foc:color.padding="'blue'" type="text">
        <hr>
        <button @click="colorStr = '#f66'">修改颜色</button>
        <input v-foc:color="colorStr" type="text"> 
        <!-- <input v-foc:color type="text">
        <input v-foc:color="'blue'" type="text">
        <input v-foc:color.padding="'blue'" type="text">

        <button @click="colorStr = '#f66'">修改颜色</button>
        <input v-foc:color="colorStr" type="text"> -->
    </div>
</body>
<script>

    const foc = {
        // 在绑定元素的 attribute 前
        // 或事件监听器应用前调用
        created(el, binding, vnode) {
            // 下面会介绍各个参数的细节
        },
        // 在元素被插入到 DOM 前调用
        beforeMount(el, binding, vnode) { },
        // 在绑定元素的父组件
        // 及他自己的所有子节点都挂载完成后调用
        mounted(el, binding, vnode) {
            /*
            // el 是绑定的元素本身
             binding 指令对象
                * arg  指令参数
                dir 指令生命周期
                instance 当前所在组件实例
                * modifiers 指令修饰符
                oldValue 原来值
                * value 当前值
            // vnode 当前绑定的虚拟 DOM 对象
            // prevVnode 之前的虚拟 DOM 对象
            */
            // console.log(binding);

            // setTimeout(() => {
            //     // input 输入框聚焦
            //     el.focus()
            // }, 2000);

            // if (binding.arg == 'color') {
            //     el.style.color = binding.value ? binding.value : 'red'
            // }
            // // 有修饰符
            // if (binding.modifiers.padding) {
            //     el.style.paddingLeft = '10px'
            // }
        },
        // 绑定元素的父组件更新前调用
        beforeUpdate(el, binding, vnode, prevVnode) { },
        // 在绑定元素的父组件
        // 及他自己的所有子节点都更新后调用
        updated(el, binding, vnode, prevVnode) {
            if (binding.arg == 'color') {
                el.style.color = binding.value ? binding.value : 'red'
            }
            if (binding.modifiers.padding) {
                el.style.paddingLeft = '10px'
            }
        },
        // 绑定元素的父组件卸载前调用
        beforeUnmount(el, binding, vnode) { },
        // 绑定元素的父组件卸载后调用
        unmounted(el, binding, vnode) { }
    }

    const app = Vue.createApp({
        data() {
            return {
                colorStr: 'blue'
            }
        },
        methods: {},
        // 自定义指令的选项
        directives: {
            foc
        }
    })

    // app.componetn
    // app.directive

    const vm = app.mount('#app')
</script>

</html>